<template>
  <div class="home">
    <!-- 头部开始 -->
    <div class="home-header">
      <div class="header-left"></div>
      <div class="header-center">若依管理系统驾驶舱</div>
      <div class="header-right">
        <!-- 应用中心开始 -->
        <el-dropdown class="applicate" v-if="topNav">
          <router-link :to="$store.state.permission.topbarRouters[0].children[0].path">
            <svg-icon icon-class="applicate"/>
            <span class="ml5">应用中心</span>
          </router-link>          
        </el-dropdown>
        <!-- 应用中心结束 -->

        <!-- 个人中心开始 -->
        <el-dropdown class="avatar-container right-menu-item hover-effect"  trigger="click">
          <div class="avatar-wrapper">
            <img :src="avatar"  class="user-avatar" />
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided  @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 个人中心结束 -->
      </div>
    </div>
    <!-- 头部结束 -->

    <!-- 内容开始 -->
    <div class="home-contenter"></div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";

export default {
  name: "Index",
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    setting: {
      get () {
        return this.$store.state.settings.showSettings;
      },
      set (val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get () {
        return this.$store.state.settings.topNav;
      },
    }
  },
  methods: {
    toggleSideBar () {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout () {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index";
          });
        })
        .catch(() => { });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  background-color: #1b345d;
  background-size: cover;

  .home-header {
    display: flex;
    align-items: center;
    height: 97px;
    background: url('/images/main/topbg.png') no-repeat center;
    background-size: cover;

    .header-left {
      flex: 1;
      height: 50px;
      padding-left: 10px;
    }

    .header-center {
      flex: 1.6;
      display: flex;
      justify-content: center;
      font-size: 44px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #39d6fe;
      line-height: 49px;
      text-shadow: 0px 2px 4px #000000;
      letter-spacing: 30px;
    }

    .header-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      height: 50px;
      padding-right: 10px;

      .applicate {   
        width: 163px;
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center; 
        font-size: 18px;
        margin-top: -15px;
        margin-right: 5px;

        img{
          width: 18px;
          height: 18px;
          vertical-align: middle;
        }        
      }

      .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
          margin-top: -10px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.el-popper[x-placement^=bottom]{
    top: 55px !important;
}
</style>
